import { ResultPage, Card } from 'antd-mobile'
import {  SearchBar } from 'antd-mobile'
import { NoticeBar} from 'antd-mobile'
import { CapsuleTabs } from 'antd-mobile'
import axios from '../../api/http'
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Yue from '../../assets/预约挂号.png'
import ji from '../../assets/极速问诊.png'
import fu from '../../assets/复诊开房费.png'
function Index() {
  const nav=useNavigate()
  const [gg,setgg]=useState(0)
  const [list,setlist]=useState([])
  useEffect(()=>{
axios.get('/doctor/detail').then(res=>{
  if( res.code===20000){
 setlist(res.data)
  }
    console.log(res);  
  })

  },[])
  useEffect(()=>{
    window.addEventListener('scroll',()=>{
      setgg(window.pageYOffset)
    })
    return()=>{
      window.removeEventListener('scroll',()=>{
        setgg(0)
      })
    }
  },[])
    // const demoLongText = lorem.generateWords(20)
  // const [list,setlist]=useState([])
  // useEffect(()=>{
  //   axios.get('/api/doctor/list').then(res=>{
      
  //     console.log(res);
      
  //       setlist(res.data)
  //   })
  // },[])
  useEffect(()=>{
window.addEventListener('scroll',()=>{
  setgg(window.pageYOffset)
   
})
return()=>{
  window.removeEventListener('scroll',()=>{
    setgg(0)
  })
}
  },[])
  return (
    <div style={{width:'100vw',height:'100vh'}}>
     <ResultPage
      status=''
      title='妙手医生·妙手互联网医院'
      description='' >
           <SearchBar placeholder='搜索医生、医院、药品、疾病症状' 
           onSearch={()=>nav('/search')} style={{ overflow: 'auto'}}/>
              <NoticeBar 
              content='公告:1、自治区卫生热线250-456123789 妙手互联网热线1223-456123 2、为了更好的服务您,即日起您点击预约挂号，请务必填写真实姓名和联系方式。'
               color='alert' />
            <ResultPage.Card style={{ height: 180, padding: 8 }}>
                <div style={{display:'flex'}}>
<Card style={{width:'25vw',margin:'5px'}} onClick={()=>nav('/yu')}>
  <img src={Yue}alt="" />
  <h3 style={{textAlign:'center'}}>预约挂号</h3>
  <p style={{textAlign:'center',color:'#ccc',fontSize:'12px'}}>30W+专家入驻</p>
  </Card>
  <Card style={{width:'25vw',margin:'5px'}}  onClick={()=>nav('/ji')}>
  <img src={ji}alt="" />
  <h3 style={{textAlign:'center'}}>极速问诊</h3>
  <p style={{textAlign:'center',color:'#ccc',fontSize:'12px'}}>平均3分钟接诊</p>
  </Card>
  <Card style={{width:'25vw',margin:'5px'}}  onClick={()=>nav('/fu')}>
  <img src={fu}alt="" style={{width:'30vw',height:'7vh'}}/>
  <h3 style={{textAlign:'center'}}>复诊开房费</h3>
  <p style={{textAlign:'center',color:'#ccc',fontSize:'12px'}}>慢病续方送到家</p>
  </Card>
  
    </div>  
      </ResultPage.Card>

      <Card style={{ height: 1000, marginTop: 12 }}>
<div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
  <h2 style={{margin:0}}>我要问专家</h2>
  <span
    onClick={()=>nav('/more')}
    style={{
      display:'inline-flex',alignItems:'center',gap:'6px',
      padding:'4px 10px',
      fontSize:'12px',color:'#9e9e9e',
      background:'#f5f5f5',
      borderRadius:'999px',
      cursor:'pointer'
    }}>
      更多 <span style={{fontSize:'14px'}}>›</span>
  </span>
</div>
     <CapsuleTabs>
          <CapsuleTabs.Tab title='妇产科' key='1' >
            妇产科
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='儿科' key='2'>
            儿科
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='皮肤科' key='3'>
            皮肤科
          </CapsuleTabs.Tab>
           <CapsuleTabs.Tab title='心血管内科' key='4'>
            心血管内科
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='呼吸内科' key='5'>
            呼吸内科
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='消化内科' key='6'>
            消化内科
          </CapsuleTabs.Tab>
           <CapsuleTabs.Tab title='中医科' key='7'>
            中医科
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='口腔科' key='animals'>
            口腔科
          </CapsuleTabs.Tab>

        </CapsuleTabs>
    <div>
    {list && list.length>0 ? (     
      list.map((item:any,index:number)=> {
        const name = item?.doctorname || item?.name || '专家';
        const avatar = item?.doctorimage || item?.avatar || 'https://via.placeholder.com/56';
        const title = item?.doctorstate || item?.doctortitle || '';
        const department = item?.socoadmin || item?.doctorministre || '';
        const city = item?.doctorcity || '';
        const price = item?.doctorprice || item?.price;
        const pillTags = [department, city].filter(Boolean).slice(0,2);
        return (
          <div
            key={item.doctorid || item.id || index}
            style={{
              display:'flex',
              alignItems:'center',
              gap:'12px',
              padding:'12px 0',
              borderBottom:'1px solid #f2f2f2'
            }}
          >
            <img
              src={avatar}
              alt="avatar"
              style={{width:'56px',height:'56px',borderRadius:'50%'}}
            />
            <div style={{flex:1,minWidth:0}}>
              <div style={{display:'flex',alignItems:'center',gap:'8px'}}>
                <div style={{fontSize:'15px',fontWeight:600,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{name}</div>
                {title ? <span style={{fontSize:'12px',color:'#666'}}>{title}</span> : null}
              </div>
              {pillTags.length ? (
                <div style={{marginTop:'6px',display:'flex',gap:'6px',flexWrap:'wrap'}}>
                  {pillTags.map((t:string,i:number)=> (
                    <span key={i} style={{fontSize:'12px',color:'#1677ff',background:'#eaf3ff',padding:'2px 6px',borderRadius:'10px'}}>{t}</span>
                  ))}
                </div>
              ) : null}
            </div>
            <div style={{textAlign:'right',minWidth:'80px'}}>
              <div style={{color:'#ff6b00',fontWeight:600}}>{price ? `¥${price}` : ''}</div>
              <button style={{marginTop:'6px',background:'#ff6b00',color:'#fff',border:'none',borderRadius:'14px',padding:'4px 10px'}}>去问诊</button>
            </div>
          </div>
        )
      })
    ) : (
      <div style={{textAlign:'center',color:'#999',padding:'20px 0'}}>暂无数据</div>    
    )}
    </div>

     <div style={{textAlign:'center'}}><a href="">查看此科室更多科室</a></div>
      </Card>
       
    </ResultPage>
     
    
    </div>
  )
}

export default Index
